<template>
    <div>
        <router-link :to="`/goods/detail/${goods.pre_goods_id}`" class="goods-item">
            <img :src="goods.cover_pic">
            <div class="item-detail">
                <p class="p28 ellipsis2L">{{goods.description}}</p>
                <p class="c-txt clear">
                    <span class="fl colored">￥{{goods.price}}</span>
                    <span class="fr">已售：{{goods.sales_num}}</span>
                </p>
                <Bonus :bonus="goods.bonus"></Bonus>
                <div class="cart-icon" @click.prevent = "openAttrPop"
                v-if="cartShow"></div>
            </div>
        </router-link>
        <!-- 弹出的属性选择框 -->
        <Pop :popshow="popshow" popstyle="width:6.8rem;borderRadius: .53rem"
        :popClose="closeCb">
            <div class="pop-close" @click.prevent="popshow = false">×</div>
            <p class="p30 ellipsis goods-title">{{goods.description}}</p>
            <GoodsAttr :preGoodsId="goods.pre_goods_id" v-model="goodsSelect"></GoodsAttr>
            <div class="attr-footer">
                <span class="fl p28 colored">￥{{goodsDetail.price}}</span>
                <span class="bonus-wrapper"><Bonus :bonus="goodsDetail.bonus"></Bonus></span>
                <span class="fr add-cart" :class="{disabled: !goodsSelect.canAddCart}"
                @click="addCart">加入购物车</span>
            </div>
        </Pop>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
import Bonus from '@/components//Bonus'
import Pop from '@/components//Pop'
import GoodsAttr from '@/components/GoodsAttr'
export default{
    name:'GoodsItem2',
    data(){
        return{
            popshow: false,
            goodsSelect: {
                goodsId: '',
                attrs:[],
				num: 0,
				canAddCart: false
            }
        }
    },
    computed:{
        ...mapGetters({
			goodsDetail: 'goods/goodsDetail'
        })
    },
    methods:{
       ...mapActions({
           getGoodsAttrs: 'goods/getGoodsAttrs',
           addGoods: 'cart/addGoods',
       }),
       async openAttrPop(){
            Indicator.open()
            await this.getGoodsAttrs(this.goods.pre_goods_id)
            Indicator.close()
            this.popshow = true
        },
        closeCb(){
            this.$store.commit('goods/clearGoodsDetail')
            this.goodsSelect.canAddCart = false
        },
        async addCart(){
            if(!this.goodsSelect.canAddCart) return
            Indicator.open()
            await this.addGoods({
                goodsNum: this.goodsSelect.num,
                goodsId: this.goodsSelect.goodsId
            })
            this.popshow = false
            Indicator.close()
        }
    },
    // cartShow表示是否有加入购物车按钮
    props: ['goods', 'cartShow'],
	components: {Bonus, Pop, GoodsAttr}
}
</script>
<style lang='less' scoped>
.goods-item{
    height: 2.4rem;
    border-top: 1px solid #eee;
    padding: .133rem;
    background: #fff;
    display: inline-block;
    width: 100%;
    >img{
        width: 2.3rem;
        height: 2.3rem;
    }
    .item-detail{
        display: inline-block;
        width: ~'calc(100% - 2.4rem)';
        height: 2.3rem;
        background: #fff;
        padding: .2rem;
        vertical-align: top;
        position: relative;
        .ellipsis2L{
            min-height: .9rem;
        }
        .cart-icon{
            position: absolute;
            width: .5rem;
            height: .5rem;
            right: .05rem;
            bottom: .15rem;
            background: url(../assets/img/common/tiny-cart.png) no-repeat center;
            background-color: #fb4a4a;
            border-radius: 100%;
            background-size: .32rem;
        }
    }
}
.goods-title{
    width: 70%;
    margin: .2rem auto;
}
.attr-footer{
    overflow: hidden;
    margin-top: .4rem;
    .bonus-wrapper{
        display: inline-block;
        margin-left: .15rem; 
    }
    .add-cart{
        font-size: .3rem;
        color: #fff;
        background: #fb4a4a;
        text-align: center;
        padding: .1rem .2rem;
    }
}
</style>